<template>
  <div class="classroom">
    <h1 ref="title">高职软件2103班</h1>
    <button @click="showDom">点击展示元素</button>
    <button @click="sendAllmsg">发送给全都学生通知</button>
    <button @click="sendPartialMsg">发送给部分学生通知</button>
    <button @click="sendSingleMsg">发送给某个学生通知</button>
    <!--学生列表 -->
    <div class="student-list">
      <Student 
        v-for="(item, index) in StudentList" 
        :key="index" 
        :student="item"
        :ref="'student' + index"
        @tquestion="showQuestion"
      ></Student>
    </div>
  </div>
</template>

<script>
import Student from '@/views/student.vue';

export default {
  name: 'classroom',
  components: {
    Student
  },
  props: {},
  data() {
    return {
      StudentList:[]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.StudentList = [
      {name: '张三', age: 18,sex: '男'},
      {name: '李四', age: 19,sex: '女'},
      {name: '王五', age: 20,sex: '男'},
      {name: '赵六', age: 21,sex: '女'},
      {name: '孙七', age: 22,sex: '男'},
      {name: '周八', age: 23,sex: '女'},
    ]
  },
  mounted() {},
  methods: {
    showQuestion(msg) {
        alert(msg);
      
    },
    // 展示元素
    showDom(){
      console.log(this.$refs.title);
      console.log(this.$refs.student0[0].receiveMessage("开始上课了！！"));
    },
    // 发送给全体学生
    sendAllmsg(){
      // 通过refs向所有学生组件发送消息
      this.StudentList.forEach((student, index) => {
        this.$refs['student' + index][0].receiveMessage('上课了！！');
      });
    },
    sendPartialMsg() {
      // 发送给前3个学生
      for (let i = 0; i < 3; i++) {
        if (this.$refs['student' + i]) {
          this.$refs['student' + i][0].receiveMessage('部分学生通知');
        }
      }
    },
    sendSingleMsg() {
      // 发送给第一个学生
      if (this.$refs['student0']) {
        this.$refs['student0'][0].receiveMessage('单独通知');
      }
    }
  }
}
</script>

<style scoped>
    .student-list{
        display: flex;
        flex-wrap: wrap;
    }
</style>